<template>
  <a-transfer
    :dataSource="allRoleData"
    showSearch
    :listStyle="{
      width: '300px',
      height: '480px',
    }"
    :titles="['未授权角色', '已授权角色']"
    :filterOption="filterOptionRole"
    :targetKeys="roleTargetKeys"
    @change="handleChangeRole"
    @search="handleSearchRole"
  >
    <template
        slot="children"
        slot-scope="{
          props: { direction, filteredItems,selectedKeys },
          on: { itemSelectAll, itemSelect },
        }"
    >
        <zh-table :shadow="true" height="380px" type="default" ref="roleListTable" row-id="key" :data="filteredItems" @checkbox-change="onCheckboxChange($event,{selectedKeys,itemSelectAll, itemSelect})"  @checkbox-all="selectAllEvent($event,{selectedKeys,itemSelectAll, itemSelect})" :columns="direction === 'left' ? leftColumns : rightColumns"   :disabled="false">
            <template #fixed_edit="{ row }">
                <zh-input type="switch" :formflag="false" :disabled="row.disabled" v-model="row.fixed" checked-children="是" un-checked-children="否"  @change="onFixedChange(row)"></zh-input>
            </template>

        </zh-table>
    </template>
  </a-transfer>
</template>

<script>
import difference from 'lodash/difference';
import { editUserPrivilege } from "@/services/system/api"

const flagMap = {
  0: {
    status: 'default',
    text: '否'
  },
  1: {
    status: 'processing',
    text: '是'
  }
}
export default {
  data () {
    return {
      allList:[],
      allRoleData: [],
      roleTargetKeys: [],
      targetRows:[],
      leftColumns: [
        { type: 'checkbox', width: 50, fixed: 'left' },
        { type: 'seq', width: 50, fixed: 'left', align: 'center', title: '序号' },
        {field: 'key', title: '角色id', visible: false, align: 'center', width: 150},
        { field: 'title', title: '角色名称', fixed: 'left', align: 'center', width: 250 }
      ],
      rightColumns: [
        { type: 'checkbox', width: 50, fixed: 'left' },
        { type: 'seq', width: 50, fixed: 'left', align: 'center', title: '序号' },
        {field: 'key', title: '角色id', visible: false, align: 'center', width: 150},
        { field: 'title', title: '角色名称', fixed: 'left', align: 'center', width: 250 },
        { field: 'fixed', title: '角色可编辑', align: 'center', width: 120 ,editRender:{},slots: {edit: 'fixed_edit',default:  ({ row }) => {
            return this.setFlag(row)
        }}},
      ],
    }
  },
  created () {
  },
  methods: {
    setDataSource (data) {
      this.allList=data
      console.log(data)
      if (data) {
        const roleList = []
        for (let i = 0; i < data.length; i++) {
          const item = data[i]
          roleList.push({
            key: item.roleId.toString(),
            title: item.roleName,
            fixed: item.fixed,
            editDisabled:item.editDisabled,
            description: item.remarks ? item.remarks : '',
            disabled: item.disabled
          })
        }
        this.allRoleData = roleList
        this.setTargetRows()
      }
    },
    setTargetKeys (data) {
      this.roleTargetKeys = data
      this.setTargetRows()
      
    },
    filterOptionRole (inputValue, option) {
      return option.title.indexOf(inputValue) > -1
    },
    setTargetRows(){
      let keys=this.roleTargetKeys
      let allList  = this.allList
      if(keys&&keys.length>0&&allList&&allList.length>0){
        let targetRows=[]
        keys.forEach(key => {
          for (let i = 0; i < allList.length; i++) {
              const item = allList[i]
              if(key==item.roleId){
                  targetRows.push(item)
                  break
              }
          }
        })
        this.targetRows=targetRows
      }else{
        this.targetRows=[]
      }
    },
    handleChangeRole (targetKeys, direction, moveKeys) {
      console.log(targetKeys, direction, moveKeys)
      this.roleTargetKeys = targetKeys
       this.setTargetRows()
    },
    handleSearchRole (dir, value) {
      console.log('search:', dir, value)
    },
    setFlag (row) {
        const text = flagMap[row.fixed].text
        const status = flagMap[row.fixed].status
        if (text) {
            return [<a-badge status={status} text={text}/>]
        }else {
            return row.fixed
        }
    },
    onCheckboxChange({ checked, row },{selectedKeys,itemSelectAll, itemSelect}){
        itemSelect(row.key, checked)
    },
    selectAllEvent({ checked, records },{selectedKeys,itemSelectAll, itemSelect}){
        const treeSelectedKeys = records
            .filter(item => !item.disabled)
            .map(({ key }) => key);
        const diffKeys = checked
            ? difference(treeSelectedKeys, selectedKeys)
            : difference(selectedKeys, treeSelectedKeys);
        itemSelectAll(diffKeys, checked);
    },
    onFixedChange(row){
        const data = [...this.targetRows]
        let i
        data.forEach((item, index, arr) => {
            if (item.roleId === row.key) {
                i = index
                item.fixed=row.fixed
                arr.splice(index, 1, item)
                return item
            }
        })
        this.targetRows = data
    }
    
  }
}
</script>
